<template>
  <div class="box">
    <van-notice-bar
      color="#FE6E34"
      background="#FFE8E3"
      left-icon="volume-o"
      text="如果没有您要选择的内容，请选择其他！"
    />
    <div class="radio_box">
      <van-radio-group :value="radioIndex" @change="onChange">
        <van-radio label-position="left" :name="index" v-for="(item,index) in optionsList" :key="index">{{item.options}}</van-radio>
      </van-radio-group>
    </div>
    <textarea v-model="query.content" class="textarea" name="remark" placeholder="补充原因，有利于更快处理"/>

    <div class="photo" :style="{paddingBottom:isIphoneXnum+'px'}">
      <p class="title">上传凭证<span>*</span></p>
      <div class="box1">
        <div class="nr">
          <block v-if="query.imgUrl.length">
            <div class="img_box" v-for="(item,index) in query.imgUrl" :key="index">
              <img @click="preview(item)" mode="aspectFill" :src="item" alt="">
              <p @click="close(index)"><van-icon name="cross" size="12"/></p>
            </div>
          </block>
          <div class="img" @click="changeImg">
            <img mode="widthFix" src="/static/images/photo.png" alt="" />
            <p>上传凭证</p>
          </div>
        </div>
        <div class="text_t">
          <p class="text">上传截图或者照片</p>
          <p class="text">单张图片大小不超过2M，最多上传5张</p>
        </div>
      </div>
    </div>
    <div class="button_box">
      <div class="box1" :style="{paddingBottom:isIphoneXnum+'px'}">
        <button :class="disabled?'button on':'button'" :disabled="disabled" @click="submit">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import { 
  getFeedbackOptionsList,
  addStoreFeedback 
} from "@/api/index";
import { getToken,getRefreshToken } from "@/utils/auth";
export default {
  data(){
    return{
      radioIndex:0,
      disabled:false,
      query:{
        content:'',
        imgUrl:[],
        feedbackOptionsId:'',
      },
      optionsList:[],
      isIphoneXnum:0,
    }
  },
  methods:{
    getOptionsList(){
      getFeedbackOptionsList().then(res=>{
        console.log(res)
        if(res.statusCode == '00000'){
          this.optionsList = res.data
        }
      })
    },
    onChange(e){
      console.log(e)
      this.radioIndex = e.mp.detail
    },
    changeImg(){
      if(this.query.imgUrl.length >= 5){
        this.$toast('最多上传5张！')
        return
      }
      let arr = []
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success :(res)=>{
          wx.showLoading({title: '上传中...'})
          console.log(res)
          // tempFilePath可以作为img标签的src属性显示图片
          wx.uploadFile({
            url: 'https://gxegateway.jiuzhours.com/gxe-saas-biz/file/fileUpload',
            name: 'file',
            method: 'POST',
            filePath: res.tempFilePaths[0],
            header: {
              'Authorization': `Bearer ${getToken()}`,
              'refreshToken':getRefreshToken(),
            },
            formData: {
              file: res.tempFilePaths[0],
            },
            success: (res) => {
              this.$toast('上传成功！')
              let returnData = JSON.parse(res.data)
              arr.push(returnData.data)
              this.query.imgUrl = this.query.imgUrl.concat(arr)
              console.log(arr)
              console.log(this.query.imgUrl)
            },
            fail: (err) => {
              console.log(err)
              this.$toast('上传失败，请重新上传！')
              wx.hideLoading()
            }
          })
          
        }
      })
    },
    close(index){
      let arr = []
      arr = this.query.imgUrl
      arr.splice(index, 1)
      this.query.imgUrl = []
      this.query.imgUrl = arr
    },
    preview(img){
      wx.previewImage({
        current: img, // 图片的地址url
        urls: this.query.imgUrl // 预览的地址url
      })
    },
    submit(){
      const _this = this;
      this.query.feedbackOptionsId = this.optionsList[this.radioIndex].id
      console.log(this.query)

      wx.showModal({
        title: '提示',
        content: '请确认反馈信息是否无误！是否提交？',
        success: function (res) {
          if (res.confirm) {
            wx.showLoading({title: '提交中...'})
            _this.disabled = true
            addStoreFeedback(_this.query).then(res=>{
              if(res.statusCode == '00000'){
                setTimeout(() => {
                  wx.redirectTo({
                    url: "/pages/my/feedback/success/main",
                  });
                }, 2000);
              }else{
                _this.disabled = false
                wx.hideLoading()
              }
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
      return
      
    }
  },
  onShow(){
    this.getOptionsList()
  },
  onLoad(){
    this.disabled = false
    wx.hideLoading()
    this.query.imgUrl = []
    this.query.feedbackOptionsId = ''
    this.radioIndex = 0
    this.query.content = ''

    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25;
        } else {
          this.isIphoneXnum = 0;
        }
      },
    });
  }
}
</script>

<style lang="scss" scoped>
.box{
  min-height: 100vh;
  .radio_box{
    margin:0 auto;
    /deep/ .van-radio{
      justify-content: space-between;
      height: 80rpx;
      font-size:30rpx;
      border-bottom:1px solid #E6E7EC;
      padding:0 30rpx;
    }
    /deep/ .van-radio__label{
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
    }
  }
  .photo{
    width: 90%;
    margin:0 auto;
    margin-bottom:30rpx;
    .title{
      font-size:32rpx;
      font-weight: 500;
      color:#252628;
      margin-bottom:24rpx; 
      span{
        color:#FF4622;
      }
    }
    .box1{
      .nr{
        display: flex;
        flex-wrap:wrap;
      }
      .img{
        width: 140rpx;
        height: 140rpx;
        background: #F8F8F8;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction:column;
        margin-right:20rpx;
        img{
          width: 48rpx;
          height: 48rpx;
        }
        p{
          font-size:24rpx;
          color:#999DA0;
          margin-top:8rpx;
        }
      }
      .img_box{
        width: 140rpx;
        height: 140rpx;
        position: relative;
        margin-right:40rpx;
        img{
          width: 140rpx;
          height: 140rpx;
          border-radius: 20rpx;
        }
        p{
          position: absolute;
          top: -12rpx;
          right: -16rpx;
          width: 40rpx;
          height: 40rpx;
          background: #333;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color:#fff;
        }
      }
      .text_t{
        color:#999DA0;
        font-size:26rpx;
        margin-top:24rpx;
      }
    }
  }
  .textarea{
    padding:20rpx;
    background: #f8f8f8;
    font-size:30rpx;
    width: 86%;
    margin:30rpx auto 32rpx auto;
    height: 200rpx;
    border-radius: 20rpx;
  }
  .button_box{
    width: 100%;
    height: 144rpx;
    .box1{
      width: 100%;
      height: 144rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom:0;
      left:0;
      border-top:1px solid #D9D9D9;
      background: #fff;
    }
    .button{
      background: #222222;
      color: #fff;
      font-size: 30rpx;
      text-align: center;
      height: 96rpx;
      width: 90%;
      line-height: 96rpx;
      border-radius: 4rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .button::after{
      border:none;
    }
  }
}
</style>